<template>
    <div class="panel panel-default">
        <!--顶部-->
        <div class="panel-heading">
            <h3 class="panel-title text-left">安全中心</h3>
        </div>
        <!--身体部分-->
        <div class="panel-body">
            <!--昵称-->
            <br>
            <span class="full-left">
            <!--<el-button type="text">昵称</el-button>-->
                     <el-button>昵称</el-button>&nbsp;&nbsp;&nbsp;
                    <el-input
                            placeholder="请输入内容"
                            v-model="input"
                            :disabled="true"
                            clearable>
                    </el-input>
                </span>
            <span class="full-left">
            <!--<el-button type="text">邮箱</el-button>-->
                     <el-button>邮箱</el-button>&nbsp;&nbsp;&nbsp;
                    <el-input
                            placeholder="请输入内容"
                            v-model="email"
                            :disabled="true"
                            clearable>
                    </el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <el-button type="primary" round @click="openemail"> 点击修改</el-button>
                </span>
            <br>
            <span class="full-left">
                     <el-button>手机</el-button>&nbsp;&nbsp;&nbsp;
                    <el-input
                            placeholder="请输入内容"
                            v-model="mobile"
                            :disabled="true"
                            clearable>
                    </el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="primary" round @click="openmobile"> 点击修改</el-button>
                </span>

        </div>
    </div>
</template>

<script>


    export default {
        name: "securityCenter",
        data() {
            return {
                input: '',
                mobile: '',
                email: '',
                user_id: ''
            }
        },
        methods: {
            //邮箱模态框
            openemail() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({value}) => {
                    //用户id
                    this.user_id = this.$cookies.get('user_dict').id;
                    //发送put请求
                    // console.log('value:', value);
                    this.$axios.put(`${this.$settings.base_url}/useroperation/changemail/${this.user_id}/`, {email: value}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '你的邮箱是: ' + value
                        });
                        // console.log('response.data:', response.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },

            //手机模态框
            openmobile() {
                this.$prompt('请输入手机', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /1[3-9]\d{9}/,
                    inputErrorMessage: '手机格式不正确'
                }).then(({value}) => {
                    this.user_id = this.$cookies.get('user_dict').id;
                    //发送put请求
                    console.log('value:', value);
                    this.$axios.put(`${this.$settings.base_url}/useroperation/changemobile/${this.user_id}/`, {mobile: value}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '你的手机是: ' + value

                        });
                        console.log('response.data:', response.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        },
    }
</script>

<style scoped>

</style>